<template>
  <div>
    <div v-html="content"></div>
    <CommonTable :getData="getTableData" @pageChange="handlePageChange">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
    </CommonTable>
  </div>
</template>

<script>
import CommonTable from "../components/CommonTable";
export default {
  name:"Table",
  data() {
    return {
      getTableData: () =>
        Promise.resolve({
          tableData: [],
          total: 0,
        }),
      content: "",
    };
  },
  mounted() {
    this.queryData(1, 10);
    this.$get("/docs/table").then((res) => (this.content = res));
  },
  methods: {
    queryData(page, size) {
      this.getTableData = () =>
        this.$get("/tableList", {
          page,
          size,
        });
    },
    handlePageChange(val) {
      const { page, size } = val;
      this.queryData(page, size);
    },
  },
  components: { CommonTable },
};
</script>